/* @import "../../../../scripts/assets/tailwind.css'; */
@import '../../../assets/tailwind.css';

.button {
    @apply inline-flex cursor-pointer items-center justify-center px-4 py-2;
    @apply rounded-xl text-sm font-bold transition-all duration-100;
    /* @apply focus:ring-3 focus:ring-zinc-700/50 focus:ring-offset-2 focus:ring-offset-zinc-700; */

    /* Sizing Controls */
    &.small {
        @apply h-8 px-4 py-0 text-sm font-normal focus:ring-2;
    }

    &.large {
        @apply px-5 py-3;
    }

    &.secondary {
        @apply bg-white/10;

        &:disabled {
            background: transparent !important;
        }
    }

    &:disabled {
        @apply cursor-not-allowed;
    }

    &.square {
        @apply h-12 w-12 p-0;

        &.small {
            @apply h-8 w-8;
        }
    }
}

.primary {
    @apply bg-brand text-blue-50;
    @apply hover:bg-brand/70 active:bg-brand;
    /* @apply hover:bg-brand/70 focus:ring-brand/50 focus:ring-opacity-75 active:bg-brand; */

    &.secondary {
        @apply hover:bg-brand/10 active:bg-brand;
    }

    &:disabled {
        @apply bg-brand/25;
    }
}

.text {
    @apply bg-zinc-700 text-zinc-50;
    @apply hover:bg-zinc-600 active:bg-zinc-600;
    /* @apply focus:ring-opacity-50 hover:bg-zinc-600 focus:ring-zinc-300 active:bg-zinc-600; */

    &.secondary {
        @apply hover:bg-zinc-500 active:bg-zinc-500;
    }

    &:disabled {
        @apply bg-zinc-500/75 text-zinc-200/75;
    }
}

.danger {
    @apply bg-red-600 text-zinc-50;
    @apply hover:bg-red-500 active:bg-red-500;
    /* @apply focus:ring-opacity-75 hover:bg-red-500 focus:ring-red-400 active:bg-red-500; */

    &.secondary {
        @apply hover:bg-red-600 active:bg-red-600;
    }

    &:disabled {
        @apply bg-red-600/75 text-red-50/75;
    }
}
